<template>
  <el-dialog :visible.sync="visible" title="停用" :close-on-click-modal="false" @opened="handleOpened" @closed="handleClosed">
    <div>
      <el-form ref="form" :model="formData" :rules="formRules" label-width="100px">
        <el-form-item label="停用原因" prop="discontinuationReason">
          <c-dict-select v-model="formData.discontinuationReason" dict-type-code="CTM_MARKET_DISABLE_TYPE" clearable placeholder="停用原因" />
        </el-form-item>
        <el-form-item label="停用原因说明" prop="discontinuationRemark">
          <el-input v-model="formData.discontinuationRemark" type="textarea" show-word-limit maxlength="1024" :autosize="{minRows: 3}" placeholder="停用原因说明" clearable />
        </el-form-item>
      </el-form>
      <div class="btn-end">
        <c-button type="default" @click="handleCancel">取消</c-button>
        <c-button type="primary" @click="handleConfirm">确定</c-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { marketDisenable } from '@/api/channelTask2/market'
export default {
  name: 'Disable',
  props: {
    rows: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false,
      formData: {
        discontinuationReason: '',
        discontinuationRemark: ''
      },
      formRules: {
        discontinuationReason: [{ required: true, message: '请选择停用原因', trigger: 'change' }]
      },
      selectData: {}
    }
  },
  methods: {
    openDialog() {
      this.visible = true
    },
    handleOpened() {
      if (this.rows.length > 0) {
        this.selectData = this.rows[0]
      }
    },
    handleClosed() {
      this.selectData = {}
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.resetFields()
        this.$refs.form && this.$refs.form.clearValidate()
      })
    },
    handleCancel() {
      this.visible = false
    },
    handleConfirm() {
      return this.$refs.form.validate().then(() => {
        const data = {
          ...this.formData,
          associatedMarketCode: this.selectData.associatedMarketCode, // 关联市场编码
          marketId: this.selectData.id // 市场ID
        }
        return marketDisenable(data).then(res => {
          this.$message.success('操作成功!')
          this.$emit('on-success')
          this.visible = false
        })
      })
    }
  }
}
</script>
